<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
</head>
<body>

<div th:replace="admin/commons/bar::#header(activeUrl='tag')"/>

<div class="container" id="app">

    <div th:replace="admin/commons/bar::#header_menu(menuActive='tagPublish.html',menuActive2='tagList.html',menuActive3='list')"/>

    <div class="main_form">

        <table class="table table-bordered">
            <thead>
            <th>#</th>
            <th>名称</th>
            <th>操作</th>
            </thead>
            <tbody>
            <tr v-for="(tag,index) in tagList.list">
                <td>{{tag.id}}</td>
                <td>{{tag.name}}</td>
                <td>
                    <button type="button" class="btn btn-info" @click="edit(tag.id)">编辑</button>
                    <button type="button" class="btn btn-danger" @click="del(tag.id)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>

        <nav aria-label="..." class="main-pages">
            <ul class="pager">
                <li id="prev" :class="['previous',tagList.pageNum==1?'disabled':'']"><a @click.prevent="prev"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li id="next" :class="['next',tagList.pageNum==tagList.pages?'disabled':'']"><a @click.prevent="next">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>

    </div>


    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-ful" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >更新</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>分类</label>
                        <input type="text" name="name" v-model:value="name" class="form-control" placeholder="分类">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" @click="editTag" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-ful" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >确定删除？</h4>
                </div>
                <div class="modal-footer" style="border-top: none!important;">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
                    <button type="button" @click="delTag" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>删除</button>
                </div>
            </div>
        </div>
    </div>
    

</div>


<div th:replace="admin/commons/bar::#footer"/>

<script th:src="@{/js/jquery.min.js}"/>
<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--<script th:src="@{/js/axios.min.js}"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>

<script>

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                tagList:[],//结果集
                tagId:null,//更新或删除选中的id
                name:null,//编辑中的name
            }
        },
        methods:{
            next:function(){
                if(this.tagList.pageNum+1<=this.tagList.pages){
                    var that = this;
                    this.ajax("get", "/blogs/tag", {page:that.tagList.nextPage,size:10},function(res){that.tagList = res;});
                }

            },
            prev:function(){
                if(this.tagList.pageNum-1>0){
                    var that = this;
                    this.ajax("get", "/blogs/tag", {page:that.tagList.prePage,size:10}, function(res){that.tagList = res;});
                }
            },
            del:function(index){
                this.tagId = index;
                $("#delModal").modal();
            },
            edit:function(index){
                this.tagId = index;
                var that = this;
                this.ajax("get", "/blogs/tag/"+index, "", function(res){that.name = res.name;});
                $('#editModal').modal();
            },
            delTag:function(){
                var that = this;
                this.ajax("DELETE", "/blogs/tag/"+this.tagId, "", function(res){alert("已删除");that.init();});
            },
            editTag:function(){
                var that = this;
                if(that.name.length>=20){
                    alert("标签name过长 ，请不要超过20个字符")
                }else{
                    this.ajax("PUT", "/blogs/tag", JSON.stringify({id:that.tagId,name:that.name}), function(res){alert("已更新");that.init();});
                }
            },
            ajax:function(method,url,data,back){
                var that = this;
                $.ajax({
                    type:method,
                    url:url,
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    data:data,
                    success:function(res){
                        back(res);
                    },
                    error:function(res){
                        console.log(res);
                        if(method!="get")
                            alert("数据加载出现错误！")
                    }
                })
            },
            init:function(){
                var that = this;
                this.ajax("get", "/blogs/tag", {page:1,size:10},function(res){that.tagList = res;});
            }

        },
        created(){
            this.init();
        }
    })

</script>

</body>
</html>